
<template>
    <div class="bigbox">
        <div>
            <img src="../public/img/icon01.png" class="icon01">
        </div>
        <div>
            <span>
                <router-link :to="{ path: '/index' }" class="tiaozhuan">
                    首页
                </router-link>
            </span>
        </div>
        <div>
            <span class="allkechen">
                <router-link :to="{ path: '/allcourse' }" class="tiaozhuan" id="allkechen">
                    全部课程
                </router-link>
            </span>
        </div>
        <div>
            <span class="jiangshi">
                <router-link :to="{ path: '/teacher' }" class="tiaozhuan">
                    成为讲师
                </router-link>
            </span>
        </div>
        <div>
            <span class="xuesheng">
                <router-link :to="{ path: '/student' }" class="tiaozhuan">
                    优秀学生
                </router-link>
            </span>
        </div>
        <div>
            <input type="text" class="input"  v-model="sousuodata">
            <span class="xuesheng">
                <router-link :to="{ path: '/sousuo',query: {data: sousuodata} }" class="tiaozhuan">
                    搜索
                </router-link>
            </span>
        </div>
        <div>
            <span>
                <router-link :to="{ path: '/login' }" class="tiaozhuan">
                    登录
                </router-link>
            </span>
        </div>
        <div><span>|</span></div>
        <div>
            <span>
                <router-link :to="{ path: '/register' }" class="tiaozhuan">
                    注册
                </router-link>
            </span>
        </div>
        <!-- 头像 -->
        <!-- <div><img src="" alt=""></div> -->
    </div>
</template>

<script setup>
import { ref,onMounted,getCurrentInstance } from "vue"
let sousuodata =ref("") 
</script>


<style scoped>
.bigbox {
    height: 72px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: white;
}

.icon01 {
    width: 112px;
    height: 44px;
}

span {
    font-size: 16px;
    display: inline-block;
    line-height: 72px;
}

.tiaozhuan {
    text-decoration: none;
    color: black;
}

.allkechen {
    text-align: center;
    width: 88px;
    background-color: rgb(40, 178, 139);
}

#allkechen {
    color: white;
}
</style>